<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>浏览器</title>
    <style>
        * {
            margin: 0;
        }

        body {
            background-color: #FFF;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        }

        header {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #F7F8FA;
        }

        footer {
            display: block;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #F7F8FA;
        }

        .title {
            padding: 12px;
            display: inline-block;
            vertical-align: middle;          
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .title>.icon {
            display: block;
            width: 20px;
            opacity: 0.7;
        }

        .bars {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            padding: 6px 0;
        }

        .bar {
            display: inline-block;
            vertical-align: middle;
            margin: 0 20px;
            transition: all 0.2s ease-in-out;
            border-radius: 14px;
        }

        .bar>.icon {
            display: block;
            width: 36px;
        }
        .bar:active{
            background-color: #EEE;
        }

        .flex{
            width: 100%;
            display: -webkit-flex;
            display: flex;
            align-items: center;
        }

        #fixTitle{ padding: 12px 0; font-size: 16px;line-height: 24px; -webkit-box-flex: 1; flex:1; text-align: center; font-weight: bold;}
        #footer{display: none;}
    </style>
</head>

<body>
    <header id="header">
        <div id="fixtop" style="height:20px"></div>
        <div class="flex">
            <div class="title" onclick="page.back()"><img src="./static/img/close.png" alt="close" class="icon"></div>
            <div class="title" id="fixTitle">正在加载</div>
            <div class="title" style="opacity: 0;" id="share"><img src="./static/img/share.png" alt="share" class="icon"></div>
        </div>
    </header>
    <footer id="footer" >
        <div class="bars">
            <div class="bar" id="back"><img src="./static/ddd.png" alt="close" class="icon"
                    style="transform:rotate(180deg);">
            </div>
            <div class="bar" id="forward"><img src="./static/ddd.png" alt="close" class="icon"></div>
        </div>
        <div id="fixbottom"></div>
    </footer>
</body>
<script>
    
    var MiniProgram = undefined
    var page = {
        dark: false,
        hideNavgator:false,
        showShare:false
    }
    apiready = function () {
        document.getElementById('fixtop').style.height = api.safeArea.top + 'px'
        document.getElementById('fixbottom').style.height = api.safeArea.bottom + 'px'
        if (api.pageParam.title) {
            document.getElementById('fixTitle').innerText = api.pageParam.title
        }


        page.dark = !!api.pageParam.dark
        page.hideNavgator=!!api.pageParam.hideNavgator
        page.showShare=!!api.pageParam.showShare 

        //埋点
        page.header=api.pageParam._header||{}
        page.headerURI=api.pageParam._uri||''
        page.themeId=api.pageParam._themeId||''


        if(!page.hideNavgator){          
            document.getElementById('footer').style.display='block'
        }
        if(page.showShare){
            document.getElementById('share').style.opacity=1
            document.getElementById('share').addEventListener('click',function(){
                page.share&&page.share()
            })
        }




        if (api.pageParam.url) {
            var browser = api.require('webBrowser');
            
            browser.openView({
                url: api.pageParam.url,
                scaleEnabled:true,
                rect: {
                    marginTop: document.getElementById('header').clientHeight||0,
                    marginBottom: document.getElementById('footer').clientHeight||0
                },
                progress: {
                    color: '#5C80F7',
                    height:1
                }
            })

            document.getElementById('back').addEventListener('click', function () {
                browser.historyBack(function (ret, err) {
                    if (!ret.status) {
                        page.back()
                    }
                })
            })

            document.getElementById('forward').addEventListener('click',function(){
                browser.historyForward(function(ret, err) {
                    if (!ret.status) {

                    }
                })
            })

        }

        page.send=function(action,data){                 
            if(page.headerURI &&  page.header &&  page.header.MonitorId && page.header.CustomerKey &&  page.themeId){  
                //分享主题报告埋点  
                var req=new XMLHttpRequest(),uri=window.location.href           
                req.onerror=e=>{   }
                req.ontimeout=e=>{  req.abort() }
                req.timeout=10000
                req.open('post',page.headerURI,true)
                req.setRequestHeader('content-type','application/json')
                req.onreadystatechange =e=>{
                    if(req.readyState==4){
                        if(req.status==200){
                            console.log(req)                           
                        }
                    }
                }                        
                req.send(JSON.stringify({
                    MonitorId: page.header.MonitorId,                      
                    Behaviors: [{
                                HappenTime:             new Date().getTime(),
                                PageCode:               'page_browser',
                                SimpleUrl:              uri.split('?')[0].split('#')[0],
                                CompleteUrl:            uri,
                                BehaviorType:           'SHARE',
                                LocationPointCode:      'MedicalTheme',
                                LocationPointParam1:    api.pageParam.title||'',
                                LocationPointParam2:    page.themeId||'',
                                Origin:                 api.pageParam._orgin||'',
                                CustomerKey:            page.header.CustomerKey
                    }]
                }))   
            }
        }

        page.share=function(){
            if(api.pageParam.url){
                var wx = api.require('wx');
                wx.shareWebpage({
                    apiKey: 'wx4b0c7215be85d3c6',
                    scene: 'session',
                    title: api.pageParam.title+'-好医生云医疗',
                    description: '点击查看详情',
                    thumb: 'widget://static/sign_in_logo.png',
                    contentUrl:api.pageParam.url
                },function(){
                    page.send&&page.send()
                })
            }
        }
     
        page.back = function () {
            var browser = api.require('webBrowser');
                    browser.closeView()
            api.animation({
                name: 'BROWSER',
                delay: 100,
                duration: 200,
                curve: 'ease_in_out',
                repeatCount: 0,
                autoreverse: false,
                alpha: 1,
                translation: {
                    x:  api.winWidth,
                    y:0,
                    z: 0
                },
            }, function (ret, err) {
                if (ret) {
                    api.execScript({
                        frameName: 'app',
                        script: 'page.reshow&&page.reshow()'
                    })
                    api.closeFrame({ name: 'BROWSER' })
                }
            })
        }

        page.backLastPage=function(){
            document.getElementById('back').dispatchEvent(new MouseEvent('click'))
        }


        api.setStatusBarStyle({ style: 'dark', color: 'rgba(255,255,255,0)',  animated: false })
    }
</script>

</html>